<template>
  <div class="zhengtirendu1 base-background-img">
    <div class="zhi" @click="playFun(zhi)">
        <img src="~@/assets/youxiaoxianjie/zhengtirendu/1/zhi.png">
    </div>
    <div class="chi" @click="playFun(chi)">
        <img src="~@/assets/youxiaoxianjie/zhengtirendu/1/chi.png">
    </div>
    <div class="shi" @click="playFun(shi)">
        <img src="~@/assets/youxiaoxianjie/zhengtirendu/1/shi.png">
    </div>
    <div class="ri" @click="playFun(ri)">
        <img src="~@/assets/youxiaoxianjie/zhengtirendu/1/ri.png">
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  export default {
    name: 'zhengtirendu1',
    data () {
      return {
        isshowpdf: false,
        infourl: '',
        info: '',
        zhi: {
          url: 'static/youxiao/pdf/zhengtirendu/zhi.pdf',
          data: []
        },
        chi: {
          url: 'static/youxiao/pdf/zhengtirendu/chi.pdf',
          data: []
        },
        shi: {
          url: 'static/youxiao/pdf/zhengtirendu/shi.pdf',
          data: []
        },
        ri: {
          url: 'static/youxiao/pdf/zhengtirendu/ri.pdf',
          data: []
        }
      }
    },
    methods: {
      playFun: function (item) {
        console.log(item)
        this.isshowpdf = true
        this.pdfurl = item.url
        this.info = item.data
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.zhengtirendu1 {
  background: url(~@/assets/youxiaoxianjie/zhengtirendu/1/bg.png);
}
.zhengtirendu1 > div {
  position: absolute; 
}
.zhi {
  top: 200px;
  left: 310px;
}
.chi {
  top: 200px;
  left: 722px;
}
.shi {
  top: 430px;
  left: 310px;
}
.ri {
  top: 425px;
  left: 755px;
}
</style>
